<template>
    <div class="com_container" @dblclick="resetMap">
        <div class="com_chart" ref="map_ref"></div>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
import { getProvinceMapInfo } from '@/utils/map_utils'
export default {
    // 组件名称
    name: 'mapChart',
    data() {
        return {
            mapStore: [],
            loading: null
        }
    },
    computed: {
        ...mapState(['theme'])
    },
    watch: {
        theme() {
            console.log('zhuti');
            this.chartInstance.dispose()
            this.initChart()
            this.adapter()
            this.updateChart()
        }
    },
    created() {
        // 注册回调函数
        this.$scoket.registerCallBack('mapData', this.getData)
    },
    mounted() {
        this.initChart()
        this.loading = this.$loading({
            target: this.$refs.map_ref,
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        // 获取数据需要使用客户端向服务端发送数据来获取
        this.$scoket.send({
            // 指明此次获取的信息
            action: 'getData',
            socketType: 'mapData',
            chartName: 'map',
            value: ''
        })
        window.addEventListener('resize', this.adapter)
        this.adapter()
    },
    destroyed() {
        window.removeEventListener('resize', this.adapter)
        this.$scoket.unregisterCallBack('mapData')
    },
    methods: {
        // 初始化echarts实例对象
        async initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.map_ref, this.theme)
            const ret = await axios.get('http://localhost:8999/static/map/china.json')
            this.$echarts.registerMap('china', ret.data)
            // 对图表初始化配置
            const initOption = {
                title: {
                    text: '商家分布',
                    left: 20,
                    top: 10
                },
                geo: {
                    tyep: 'map',
                    map: 'china',
                    top: '5%',
                    botton: '5%',
                    itemStyle: {
                        areaColor: '#2E72BF',
                        borderColor: '#333'
                    }
                },
                legend: {
                    left: '5%',
                    bottom: '5%',
                    orient: 'vertical'
                }
            }
            this.chartInstance.setOption(initOption)
            this.chartInstance.on('click', async arg => {
                const proInfo = getProvinceMapInfo(arg.name)
                if (!this.mapStore[proInfo.key]) {
                    const ret = await axios.get('http://localhost:8999' + proInfo.path)
                    // 存入暂存数组
                    this.mapStore[proInfo.key] = ret.data
                    this.$echarts.registerMap(proInfo.key, ret.data)
                }
                const changeOption = {
                    geo: {
                        map: proInfo.key
                    }
                }
                if (this.loading) {
                    this.loading.close()
                }
                this.chartInstance.setOption(changeOption)
            })
        },
        // 获取服务器数据
        getData(ret) {
            // ws调用getData的时候自动传入图标数据当作形参
            this.allData = ret
            this.updateChart()
        },
        // 更新图表
        updateChart() {
            const legendArr = this.allData.map(item => item.name)
            const seriesArr = this.allData.map(item => {
                return {
                    type: 'effectScatter',
                    rippleEffect: {
                        scale: 5,
                        brushType: 'stroke'
                    },
                    name: item.name,
                    data: item.children,
                    coordinateSystem: 'geo'
                }
            })
            const dataOption = {
                series: seriesArr,
                legend: {
                    data: legendArr
                }
            }
            if(this.loading){
                this.loading.close()
            }
            this.chartInstance.setOption(dataOption)
        },
        // 自适应配置更新
        adapter() {
            const titleFontSize = document.body.clientWidth / 100 * 1.15
            const adapterOption = {
                title: {
                    fontSize: titleFontSize
                },
                legend: {
                    itemWidth: titleFontSize,
                    itemHeight: titleFontSize,
                    itemGap: titleFontSize,
                    fontSize: titleFontSize / 2
                }
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()
        },
        resetMap() {
            console.log('dbclick');
            const resetOption = {
                geo: {
                    map: 'china'
                }
            }
            this.chartInstance.setOption(resetOption)
        }
    }
}
</script> 

<style scoped lang='less'>

</style>
